<template>
  <div class="media-container">
    <div class="header">
      <el-button type="primary">添加附件</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column type="index" label="序号"> </el-table-column>

      <el-table-column prop="path_url" label="路径">
        <template #default="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.path_url"
            fit="cover"
          ></el-image>
        </template>
      </el-table-column>

      <el-table-column prop="type" label="类型">
        <template #default="{ row }">
          <el-tag :type="getTagTypeText(row.type)">{{
            getTypeMapText(row.type)
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="" label="操作">
        <template #default="{ row }">
          <el-button type="danger" icon="el-icon-delete" @click="del(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reqGetMedia, reqDelMedia } from '@/api'

export default {
  data() {
    return {
      tableData: [],
      // typeMapText: {
      //   0: '图片',
      //   1: '视频',
      //   2: '音频',
      // },
    }
  },
  methods: {
    async del(id) {
      console.log(id)
      try {
        await this.$confirm('确认要删除吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })

        await reqDelMedia(id)
        // 重新加载媒体数据
        // 获取所有的媒体数据
        let result = await reqGetMedia()
        this.tableData = result
      } catch (err) {}
    },
    getTypeMapText(key) {
      let map = {
        0: '图片',
        1: '视频',
        2: '音频',
      }
      return map[key]
    },
    getTagTypeText(key) {
      let map = {
        0: 'success',
        1: 'info',
        2: 'warning',
      }
      return map[key]
    },
  },
  async mounted() {
    // 获取所有的媒体数据
    let result = await reqGetMedia()
    this.tableData = result
  },
}
</script>

<style lang="scss" scoped>
.media-container {
  .header {
    margin: 10px 0;
  }
}
</style>
